<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Listing 1</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#search').click(function() {
                var url = 'http://www.geonames.org/postalCodeLookupJSON?postalcode=' + $('#postalCode').val() + '&country=' + $('#country').val() + '&callback=?';
                console.log(url);
                $.getJSON(url, function(data) {
                    console.log(data);
                    $('#placeName').val(data.postalcodes[0].placeName);
                });
            });
        });
    </script>
</head>
<body>
<label for="country">Country</label>
<select id="country">
    <option value="CA" selected="selected">CA</option>
    <option value="US">US</option>
</select>

<br/>
<label for="postalCode">Postal Code</label><input type="text" id="postalCode" value="H2Y2W2">
<br/>
<button id="search">Search place name</button>
<br/>
<label for="placeName">Name</label><input type="text" id="placeName" readonly="readonly">
</body>
</html>